// 登录页面
<template>
  <div class="login">
    <van-nav-bar title="登录" />
    <!--ref拿到van-form实参  -->
    <van-form ref="loginForm" @submit="loginBtn">
      <van-field
        placeholder="请输入手机号码"
        name="mobile"
        v-model="user.mobile"
        :rules="formRules.mobile"
      >
        <!-- v-model.trim="user.mobile"双向绑定他的电话号码对象    
      :rules="formRules.mobile"引入他的校验规则 -->
        <i class="toutiao toutiao-shouji" slot="left-icon" />
        <!-- 插入手机图标 -->
      </van-field>

      <!-- 验证码 -->
      <van-field
        placeholder="请输入验证码"
        v-model="user.code"
        :rules="formRules.code"
      >
        <!-- v-model="user.code"双向绑定他的验证码对象 -->
        <i class="toutiao toutiao-yanzhengma" slot="left-icon" />
        <!-- 插入锁图标 -->

        <!-- 由于需要对发送验证码进行优化,故添加temolate -->
        <!-- 倒计时 -->
        <template #button>
          <van-count-down
            v-if="sending"
            finish="finishFn"
            :time="time"
            format="ss 秒"
          />
          <!-- 发送验证码 -->
          <van-button
            v-else
            size="small"
            round
            @click="sendCode"
            native-type="button"
            >发送验证码</van-button
          >
          <!--  v-else 当v-if="sending"显示的时候不显示,当v-if="sending"不显示的时候显示 -->
        </template>
      </van-field>

      <!-- 登录 -->
      <div class="login-btn">
        <van-button block type="info" native-type="submit" :loading="loading"
          >登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { sendSms, login } from "@/api/user";
export default { 
  name: "login",
  // 存储 
  data() {
    return {
      user: {
        mobile: "",
        //手机号码
        code: "",
        //验证码
      },
      formRules: {
        //定义他的校验规则
        mobile: [
          { required: true, message: "手机号码不能为空" },
          { pattern: /^1\d{10}$/, message: "手机号码不正确" },
        ],
        code: [
          { required: true, message: "验证码不能为空" },
          { pattern: /^\d{4,6}$/, message: "验证码为4-6位数字" },
        ],
      },
      time: 6000,
      sending: false,
      loading: false,
    };
  },
  // 方法
  methods: {
    async sendCode() {
        // 1. 对手机号码进行校验，如果校验不通过，则不进行任何处理
        await this.$refs.loginForm.validate("mobile");
        console.log("验证通过");
        // 2. 校验通过利用手机号码调用发送验证码的接口
        await sendSms(this.user.mobile);
        //如果调接口成功,提示发送验证码成功
        this.$toast.success("发送验证码成功");
        this.sending = true;
        //3. 展示倒计时效
    },

    //登录
    async loginBtn() {
      try {
        // 1.给按钮加上loading效果,防止反复点击
        this.loading = true;
        // 2. 利用表单信息调用登录接口，拿到token
        const res = await login(this.user);
        console.log(res.data);
        this.$toast.success("登录成功");
        // 3. 把token存储起来
        this.$store.commit("setUser", res.data);
        // 4. 跳转到首页
        this.$router.push("/my")
      } finally {
        this.loading = false;
      }
    },

    finishFn() {
      // 倒计时结束，恢复发送验证码按钮
      this.sending = false;
    },
  },
};
</script>

<style lang='less' scoped>
.login-btn {
  margin: 16px;
}
</style>